<template>
  <div class="result-container">
    <div v-if="showStatu == 1" class="win">
      <img :src="totalPic.index9" alt>
    </div>

    <!-- 未中奖 -->
    <div v-else-if="showStatu == 2" class="fail award">
      

      <img :src="totalPic.index11" alt>

      <div class="has-award">中奖名单：176****1615</div>

      <div v-if="isObtain" class="has-obtain1"></div>
      <div v-if="isTeamObtain" class="has-team-obtain1"></div>
    </div>

    <div v-else-if="showStatu == 3" class="fail">
      <img :src="totalPic.index8" alt>
      <div @click="enterShop" class="go-shop"></div>

      <div class="share" @click="shareBtn"></div>

      <div v-if="isObtain" class="has-obtain"></div>
      <div v-if="isTeamObtain" class="has-team-obtain"></div>
    </div>

    <div v-else-if="showStatu == 4" class="fail">
      <img :src="totalPic.index9" alt>

      <div class="share" @click="shareBtn"></div>

      <div v-if="isObtain" class="has-obtain1"></div>
      <div v-if="isTeamObtain" class="has-team-obtain1"></div>
    </div>


    <div v-else-if="showStatu == 5" class="fail">
      <img :src="totalPic.index12" alt>

      <div class="share" @click="shareBtn"></div>

      <div v-if="isObtain" class="has-obtain1"></div>
      <!-- <div v-if="isTeamObtain" class="has-team-obtain1"></div> -->
    </div>



    <div class="share-btn" @click="shareBtn">
        <img :src="totalPic.share_btn" alt>
      </div>

    <scroll v-if=" showStatu == 3" class="input-scroll"></scroll>

    <toast v-if="showStatu == 2 && isToast" :status="5" :on-close="closeItToast"></toast>


  </div>
</template>
<script>
import scroll from "./scroll";
import toast from "./toast";
import { filterPic } from "../apis/utils.js";
export default {
  data() {
    return {
      isToast: true,
      totalPic: {},
      
    };
  },

  props: {
    showStatu: {
      type: String,
      default: "2"
    },
    isObtain: Number,
    isTeamObtain: Number
  },
  created() {
    const imgUrl = {
      index9: "9.jpg",
      index11: "11.jpg",
      index12: "12.jpg",
      index8: "8.jpg",
      share_btn: "share_btn.png",
    };
    this.totalPic = filterPic(imgUrl);
  },

  methods: {
    enterShop() {
      // window.location.href = "/TaoAction/index.html"
      jump2url(`${window.location.origin}/TaoAction/index`)
      console.log("去购物页");
    },

    // share() {
    //   share("周年庆", "周年庆活动，邀请朋友一起赢iPhone", "");
    //   // console.log('分享')
    // },

    shareBtn() {
      //分享页面
      setTimeout(function() {
        share("哎哟有型周年庆", "吃蛋糕玩游戏，邀请朋友一起赢iPhone", "");
      }, 300);
    },

    closeItToast() {
      this.isToast = false;
    }
  },

  components: {
    scroll,
    toast
  }
};
</script>
<style lang='less' scoped>
.fail {
  .go-shop {
    position: absolute;
    bottom: 2.5rem;
    left: 2.9rem;
    width: 1.8rem;
    height: 0.5rem;
  }
}

.has-obtain {
  position: absolute;
  z-index: 1;
  bottom: 0.7rem;
  left: 1.4rem;
  width: 1.37rem;
  height: 1.37rem;
  background: url(../../../../assets/images/celebration/icon/obtain.png)
    no-repeat;
  background-size: contain;
}
.has-obtain1 {
  position: absolute;
  z-index: 1;
  bottom: 0.3rem;
  left: 1.7rem;
  width: 1.2rem;
  height: 1.2rem;
  background: url(../../../../assets/images/celebration/icon/obtain.png)
    no-repeat;
  background-size: contain;
}
.has-team-obtain {
  position: absolute;
  z-index: 1;
  bottom: 0.7rem;
  left: 4rem;
  width: 1.37rem;
  height: 1.37rem;
  background: url(../../../../assets/images/celebration/icon/obtain.png)
    no-repeat;
  background-size: contain;
}
.has-team-obtain1 {
  position: absolute;
  z-index: 1;
  bottom: 0.3rem;
  left: 4rem;
  width: 1.2rem;
  height: 1.2rem;
  background: url(../../../../assets/images/celebration/icon/obtain.png)
    no-repeat;
  background-size: contain;
}

.share {
  position: absolute;
  z-index: 1;
  bottom: 0.75rem;
  left: 3rem;
  width: 3rem;
  height: 1.5rem;
}

.input-scroll {
  position: absolute;
  top: 2.3rem;
  left: 3.3rem;
  font-size: 0.28rem;
}

.has-award {
  position: absolute;
  top: 3.28rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 5.37rem;
  height: .6rem;
  border-radius: .3rem;
  background: linear-gradient(to right,#8849f8, #304cf0);
  text-align: center;
  line-height: .6rem;
  font-size: .34rem;
  color: #fff;

}

.share-btn {
  position: absolute;
  top: 0.08rem;
  right: 0;
  width: 1.46rem;
}
</style>